<template>
  <div class="app-container">
    <div class="page-left">
      <page-nav :nav-tree="envTree"/>
    </div>
    <div class="page-content">
      <!--      <page-tags/>-->
      <div style="margin-bottom: 20px;">
        <el-button
          size="small"
          @click="addTab(editableTabsValue)"
        >新增
        </el-button>
      </div>
      <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
        <el-tab-pane
          v-for="(item, index) in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >
          <env-show></env-show>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>

<script>

  import { mapState, mapActions } from 'vuex';
  import pageTags from './common/tags.vue';
  import pageNav from './common/nav.vue';

  export default {
    data() {
      return {
        editableTabsValue: '2',
        editableTabs: [{
          title: '首页',
          name: '1',
          content: '<env-show></env-show>'
        }],
        tabIndex: 1
      };
    },
    components: {
      pageNav,
      pageTags
    },
    computed: {
      ...mapState({
        envTree: (state) => state.app.envTree
      }),
    },
    methods: {
      ...mapActions(['getEnvTree']),
      addTab(targetName) {
        let newTabName = ++this.tabIndex + '';
        this.editableTabs.push({
          title: 'New Tab',
          name: newTabName,
          content: 'New Tab content'
        });
        this.editableTabsValue = newTabName;
      },
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      },
    },
    created() {
      console.log(this.$route);
    }
  };
</script>
<style lang="scss">
  .app-container {
    display: flex;
  }

  .page-left {
    width: 400px;
  }

  .page-content {
    flex: 1;
  }

</style>
